<template>
    <Page :total="total" @on-change="changePage" @on-page-size-change="changeSize" :show-elevator="showElevator"
        :show-total="showTotal" :show-sizer="showSizer" :page-size-opts="pageSize" :current="current"
        style="margin-top: 10px"></Page>
</template>
<script>
export default {
    name: 'Paginate',
    props: {
        total: {
            type: Number,
            default: 10
        },
        current: {
            type: Number,
            default: 1
        },
        showElevator: { // 背景颜色
            type: Boolean,
            default: true
        },
        showTotal: { // 背景颜色
            type: Boolean,
            default: true
        },
        showSizer: { // 背景颜色
            type: Boolean,
            default: true
        },
        pageSize: {
            type: Array,
            default: () => [10, 20, 50, 100, 200, 300, 500]
        },
    },

    data() {
        return {}
    },
    methods: {
        changePage(page) {
            this.$emit('on-change', page)
        },
        changeSize(pageSize) {
            this.$emit('on-page-size-change', pageSize)
        },
    },
}
</script>
